* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
#root {
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
}
.dynamic-background {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .dynamic-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: gradient 15s ease infinite;
  }
  
  @keyframes gradient {
    0% {
      background: linear-gradient(to right, #ff416c, #ff4b2b);
    }
    50% {
      background: linear-gradient(to right, #ff4b2b, #fff16a);
    }
    100% {
      background: linear-gradient(to right, #fff16a, #17ead9);
    }
  }
.home {
    width: 100%;
    height: 100%;

    // header {
    //     width: 100%;
    //     height: 50px;
    //     background-color: crimson;
    // }

    main {
        width: 100%;
        height: calc(100% - 50px);
        overflow: auto;
    }

    footer {
        width: 100%;
        height: 50px;
    }
}
.验证码 {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    margin-top: 20px;
}
.code {
    font-weight: bold;
    margin-bottom: 10px;
}
.generate {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 20px;
    margin-bottom: 10px;
    cursor: pointer;
}
input[type="text"] {
    padding: 10px;
    margin-right: 10px;
    font-size: 1.2rem;
    border: none;
    border-bottom: 1px solid black;
}
.submit {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
}
.CartBox {
    width: 100%;
    height: 100%;
    background: rgb(300, 300, 300);
}
.CartNav {
    width: "100%";
    height: "300px" !important;
    margin-top: 15px;
    border-radius: 40px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.box {
    width: 100%;
    height: 100%;
    background: rgb(245, 245, 245);
    overflow: auto;
    overflow-x: hidden;
    .tops {
        width: 100%;
        height: 300px;
        background: rgb(27, 169, 186);
        border-radius: 0 0 15px 15px;

        .toplos {
            width: 100%;
            height: 90px;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
    }

    .bottom {
        width: 90%;
        height: 200px;
        background: rgb(255, 255, 255);
        margin: 0 5%;
        margin-top: -100px;
        border-radius: 15px;

        .con1 {
            width: 90%;
            height: 20%;
            border-bottom: 1px solid #d8dbdd;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
        }

        .con2 {
            width: 90%;
            height: 20%;
            border-bottom: 1px solid #d8dbdd;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
        }

        .con3 {
            width: 90%;
            height: 20%;
            border-bottom: 1px solid #d8dbdd;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
            .onc {
                width: 100%;
                background-color: rgb(255, 131, 0);
                border: none;
            }
        }
    }

    .bottom1 {
        width: 90%;
        height: 200px;
        background: rgb(255, 255, 255);
        margin: 0 5%;
        margin-top: -100px;
        border-radius: 15px;
        .toplos {
            margin-right: 130px;
        }

        .con1-1 {
            width: 90%;
            height: 30%;
            border-bottom: 1px solid #d8dbdd;
            font-size: 22px;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
            span {
                margin-top: 20px;
            }
        }

        .con2-2 {
            width: 90%;
            height: 30%;
            border-bottom: 1px solid #d8dbdd;
            font-size: 22px;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
            text-align: center;
            span {
                margin-top: 20px;
            }
        }

        .con3-3 {
            width: 90%;
            height: 20%;
            border-bottom: 1px solid #d8dbdd;
            font-size: 22px;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
            .onc {
                width: 100%;
                height: 40px;
                background-color: rgb(255, 131, 0);
                border: none;
                color: #fff;
                border-radius: 40px 40px 40px 40px;
            }
        }
        .con3-4 {
            width: 90%;
            height: 20%;
            border-bottom: 1px solid #d8dbdd;
            margin: 0 5%;
            display: flex;
            justify-content: space-between;
        }
    }
}
.con2 {
    width: 100%;
    height: 60px;

    display: flex;
    justify-content: space-between;
    background-color: #fff;
}
.demo-swiper {
    .rv-swiper {
        &__slide {
            .rv-swiper-item {
                color: #fff;
                font-size: 20px;
                height: 150px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &:nth-child(odd) {
                .rv-swiper-item {
                    background-color: #3f45ff;
                }
            }

            &:nth-child(even) {
                .rv-swiper-item {
                    background-color: lighten(#3f45ff, 8%);
                }
            }
        }

        img {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: 240px;
            padding: 30px 60px;
            background-color: #fff;
            pointer-events: none;
        }
    }
}
